<div id="container" style="padding:20px">
    <form id="photo" action="{:U('Img/uploadimg')}" method="post" enctype="multipart/form-data">
       <div class="form-group" class="col-md-6">
          <label for="exampleInputEmail1">姓名</label>
          <input type="text" class="form-control" id="exampleInputEmail1" placeholder="姓名" style="width:30%" name="id_name">
        </div>
        <div class="form-group" class="col-md-6">
          <label for="exampleInputPassword1">身份证号</label>
          <input type="text" class="form-control" id="exampleInputPassword1" placeholder="身份证号" style="width:30%" name="id_card">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">正面(<200kb)</label>
          <input type="file" id="exampleInputFile" name="positive" accept="image/jpeg,image/png,image/jpg" onchange="xmTanUploadImg(this,'xmTanImg')">      
          <img id="xmTanImg" style="width: 480px;height:230px"/>
        </div>    
        <div class="form-group">
          <label for="exampleInputFile2">反面(<200kb)</label>
          <input type="file" id="exampleInputFile2" name="opposite" accept="image/jpeg,image/png,image/jpg" onchange="xmTanUploadImg(this,'xmTanImg2')">      
           <img id="xmTanImg2" style="width: 480px;height:230px"/>
        </div>    
        <button id="sure" type="button" class="btn btn-primary">确认上传</button>
    </form>
</div>
<script>

        //判断浏览器是否支持FileReader接口
//            if (typeof FileReader == 'undefined') {
//                document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
//                //使选择控件不可操作
//                document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
//            }
            var size = 0;    
            //选择图片，马上预览
            function xmTanUploadImg(obj,img) {
                var file = obj.files[0];
                
//                console.info($('#'+obj.id).val());
//                console.log($('#'+obj.id).val());
                if(file.size > 204800){
                    obj.value ='';
                    alert("单张图片不超过200kb");
                    return;
                }
//                console.log("file.size += " + file.size);  //file.size 单位为byte
                size +=file.size;
                var reader = new FileReader();

                //读取文件过程方法
                reader.onloadstart = function (e) {
                    console.log("开始读取....");
                }
                reader.onprogress = function (e) {
                    console.log("正在读取中....");
                }
                reader.onabort = function (e) {
                    console.log("中断读取....");
                }
                reader.onerror = function (e) {
                    console.log("读取异常....");
                }
                reader.onload = function (e) {
                    console.log("成功读取....");
                    $('#'+img).attr('src',e.target.result)
                }

                reader.readAsDataURL(file)
            }
            $(function(){
                 $("#sure").click(function(){
                    if($('#exampleInputPassword1').val()=='' || $("#exampleInputFile").val() == '' || $("#exampleInputFile2").val() == ''){
                        alert('无身份证号或图片!');
                    }else if(size > 409600){
                        alert('图片大小不能超过400kb');
                    }else{
                        $('#photo').submit();
                    }
            });
            })
           
</script>